<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<!--微信缓存-->
		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Expires" content="0" />

		<title>关于我的个人活动</title>
		<link rel="stylesheet" type="text/css" href="../../css/common/common.css">
		<link rel="stylesheet" type="text/css" href="../../css/common/font-awesome-4.6.3/css/font-awesome.min.css">
		<link rel="stylesheet" type="text/css" href="../../css/activity.css">
		<link rel="stylesheet" type="text/css" href="../../css/my_activity.css" />
	</head>

	<body>
		<!--初始化 start-->
		<div id="initialize">
			<div id="status"><i class="fa fa-spinner fa-spin"></i></div>
		</div>
		<!--初始化 end-->

		<!-- 活动类型 -->
		<div class="activity-type-wrap">
			<div class="vertical-center">
				<h2 class="activity-type active" data-activity-type="personal">个人活动</h2>
				<h2 class="activity-type" data-activity-type="team">团体活动</h2>
				<span class="switch"></span>
			</div>
		</div>

		<div class="launch-join-wrap clear">
			<div class="launch-join">
				<h3 class="activity-type active" data-activity-type="launch">我的发起</h3>
				<h3 class="activity-type" data-activity-type="join">我的参与</h3>
				<div class="switch"></div>
			</div>
		</div>

		<!-- 个人活动-我的发起 -->
		<div class="activity-personal-launch activity-details active">
			<div class="activity-card">
				<div class="picture">
					<a href="#"><img src="../../images/activity/img2.png" alt="" /></a>
				</div>
				<div class="content">
					<div class="title clear">
						<h3><a href="">个人活动-我的发起</a></h3><span class="date">2017-01-15</span>
					</div>
					<div class="details"><a href="">我不相信那些用类胆固醇练出肌肉来的人如果一个男人身体</a></div>
					<div class="line"></div>
					<div class="icon-wrap">
						<div class="comment"><a href=""><span class="icon icon-comment"></span>1477</a></div>
						<div class="laud"><a href=""><span class="icon icon-laud"></span>152</a></div>
						<div class="share"><a href=""><span class="icon icon-share"></span>152</a></div>
					</div>
				</div>
			</div>

			<div class="activity-card">
				<div class="picture">
					<a href="#"><img src="../../images/activity/img2.png" alt="" /></a>
				</div>
				<div class="content">
					<div class="title clear">
						<h3><a href="">健身才能暧昧</a></h3><span class="date">2017-01-15</span>
					</div>
					<div class="details"><a href="">我不相信那些用类胆固醇练出肌肉来的人如果一个男人身体</a></div>
					<div class="line"></div>
					<div class="icon-wrap">
						<div class="comment"><a href=""><span class="icon icon-comment"></span>1477</a></div>
						<div class="laud"><a href=""><span class="icon icon-laud"></span>152</a></div>
						<div class="share"><a href=""><span class="icon icon-share"></span>152</a></div>
					</div>
				</div>
			</div>

		</div>
		
		<!-- 个人活动-我的参加 -->
		<div class="activity-personal-join activity-details">

			<div class="activity-card">
				<div class="picture">
					<a href="#"><img src="../../images/activity/img2.png" alt="" /></a>
				</div>
				<div class="content">
					<div class="title clear">
						<h3><a href="">个人活动-我的参加</a></h3><span class="date">2017-01-15</span>
					</div>
					<div class="details"><a href="">我不相信那些用类胆固醇练出肌肉来的人如果一个男人身体</a></div>
					<div class="line"></div>
					<div class="icon-wrap">
						<div class="comment"><a href=""><span class="icon icon-comment"></span>1477</a></div>
						<div class="laud"><a href=""><span class="icon icon-laud"></span>152</a></div>
						<div class="share"><a href=""><span class="icon icon-share"></span>152</a></div>
					</div>
				</div>
			</div>

			<div class="activity-card">
				<div class="picture">
					<a href="#"><img src="../../images/activity/img2.png" alt="" /></a>
				</div>
				<div class="content">
					<div class="title clear">
						<h3><a href="">健身才能暧昧</a></h3><span class="date">2017-01-15</span>
					</div>
					<div class="details"><a href="">我不相信那些用类胆固醇练出肌肉来的人如果一个男人身体</a></div>
					<div class="line"></div>
					<div class="icon-wrap">
						<div class="comment"><a href=""><span class="icon icon-comment"></span>1477</a></div>
						<div class="laud"><a href=""><span class="icon icon-laud"></span>152</a></div>
						<div class="share"><a href=""><span class="icon icon-share"></span>152</a></div>
					</div>
				</div>
			</div>

		</div>
		
		<!-- 团队活动-我的发起 -->
		<div class="activity-team-launch activity-details">
			<div class="activity-card">
				<div class="picture">
					<a href="#"><img src="../../images/activity/img2.png" alt="" /></a>
				</div>
				<div class="content">
					<div class="title clear">
						<h3><a href="">团队活动-我的发起</a></h3><span class="date">2017-01-15</span>
					</div>
					<div class="details"><a href="">我不相信那些用类胆固醇练出肌肉来的人如果一个男人身体</a></div>
					<div class="line"></div>
					<div class="icon-wrap">
						<div class="comment"><a href=""><span class="icon icon-comment"></span>1477</a></div>
						<div class="laud"><a href=""><span class="icon icon-laud"></span>152</a></div>
						<div class="share"><a href=""><span class="icon icon-share"></span>152</a></div>
					</div>
				</div>
			</div>

			<div class="activity-card">
				<div class="picture">
					<a href="#"><img src="../../images/activity/img2.png" alt="" /></a>
				</div>
				<div class="content">
					<div class="title clear">
						<h3><a href="">健身才能暧昧</a></h3><span class="date">2017-01-15</span>
					</div>
					<div class="details"><a href="">我不相信那些用类胆固醇练出肌肉来的人如果一个男人身体</a></div>
					<div class="line"></div>
					<div class="icon-wrap">
						<div class="comment"><a href=""><span class="icon icon-comment"></span>1477</a></div>
						<div class="laud"><a href=""><span class="icon icon-laud"></span>152</a></div>
						<div class="share"><a href=""><span class="icon icon-share"></span>152</a></div>
					</div>
				</div>
			</div>
		</div>
		
		<!-- 团队活动-我的参加 -->
		<div class="activity-team-join activity-details">

			<div class="activity-card">
				<div class="picture">
					<a href="#"><img src="../../images/activity/img2.png" alt="" /></a>
				</div>
				<div class="content">
					<div class="title clear">
						<h3><a href="">团队活动-我的参加</a></h3><span class="date">2017-01-15</span>
					</div>
					<div class="details"><a href="">我不相信那些用类胆固醇练出肌肉来的人如果一个男人身体</a></div>
					<div class="line"></div>
					<div class="icon-wrap">
						<div class="comment"><a href=""><span class="icon icon-comment"></span>1477</a></div>
						<div class="laud"><a href=""><span class="icon icon-laud"></span>152</a></div>
						<div class="share"><a href=""><span class="icon icon-share"></span>152</a></div>
					</div>
				</div>
			</div>

			<div class="activity-card">
				<div class="picture">
					<a href="#"><img src="../../images/activity/img2.png" alt="" /></a>
				</div>
				<div class="content">
					<div class="title clear">
						<h3><a href="">健身才能暧昧</a></h3><span class="date">2017-01-15</span>
					</div>
					<div class="details"><a href="">我不相信那些用类胆固醇练出肌肉来的人如果一个男人身体</a></div>
					<div class="line"></div>
					<div class="icon-wrap">
						<div class="comment"><a href=""><span class="icon icon-comment"></span>1477</a></div>
						<div class="laud"><a href=""><span class="icon icon-laud"></span>152</a></div>
						<div class="share"><a href=""><span class="icon icon-share"></span>152</a></div>
					</div>
				</div>
			</div>

		</div>

		<script type="text/javascript" src="../../js/common/jquery-1.10.1.min.js"></script>
		<script type="text/javascript" src="../../js/public.js"></script>
		<script type="text/javascript">
			$(document).ready(
				//详情描述超出隐藏
				function(){
					var activityNum = $('.activity-card').size();
					for(var i = 0; i < activityNum; i++) {
						var titleStr = $(".details").eq(i).text();
						var maxLen = 27; //设置要显示的字符数
						if(titleStr.length > maxLen) {
							$(".details").eq(i).html(titleStr.substring(0, maxLen) + "...");
						} else {
							$(".details").eq(i).html(titleStr);
						}
					}
				},

				//切换事件
				$('.activity-type').click(function() {
					aTindex = $('.activity-type').index(this);
					//存储选中的是个人还是团队
					var pOrT =$('.activity-type.active.pt').index();
					//滑块控制
					if(aTindex<2){
						$(this).addClass('active').siblings('.activity-type').removeClass('active');
						$('.activity-type-wrap>div .switch').animate({ 'left': aTindex * 50 + '%' }, 300);
					}else{
						$(this).addClass('active').siblings('.activity-type').removeClass('active');
						aTindex>2?$(this).siblings('.switch').css('left','94px'):$(this).siblings('.switch').css('left','-7px');
					}
					//切换控制
					if($(this).data('activity-type')=='personal'){
						$('.activity-personal-launch').addClass('active').siblings('.activity-details').removeClass('active');
					}else if($(this).data('activity-type')=='team'){
						$('.activity-team-launch').addClass('active').siblings('.activity-details').removeClass('active');
					}else if($(this).data('activity-type')=='launch'){
						console.log(pOrT);
						pOrT==0?
						$('.activity-personal-launch').addClass('active').siblings('.activity-details').removeClass('active'):
						$('.activity-team-launch').addClass('active').siblings('.activity-details').removeClass('active')
					}else if($(this).data('activity-type')=='join'){
						pOrT==0?
						$('.activity-personal-join').addClass('active').siblings('.activity-details').removeClass('active'):
						$('.activity-team-join').addClass('active').siblings('.activity-details').removeClass('active')
					}
					
				})
				
			)
		</script>
	</body>

</html>